import React,{Component} from 'react';
import { 
    View, 
    Text, 
    TouchableWithoutFeedback, 
    Animated, 
    Easing, 
    Button,
} from 'react-native';
import Alert from './Alert'
export default class Dialog extends Component {
    constructor(props){
        super(props);
        this.state = {
            showHide: false,
            showHideToastBox: false,
            currentAlpha: 0,//透明度标志位，记录当前value
            currentSize: 0.3,//缩放标志位，记录当前value
            currentToast: 0,//toast标志位，记录当前value
            fadeAnim: new Animated.Value(0), //设置初始值
            size: new Animated.Value(0.3), //设置初始值
            toast: new Animated.Value(0), //设置初始值
        }
    }

    static defaultProps = { 
        leftBtn: '确定', 
        rightBtn: '取消',
        centerBtn: '好的',
    };

    componentDidMount(){
        if(this.props.type == 'alert' || this.props.type == 'confirm'){
            this.showHideDialog(this.props.show)
        }
        
    }

    // 父组件的状态发生改变时触发，参数为将要改变的数值
    componentWillReceiveProps(nextProps){
        if(this.props.type == 'alert' || this.props.type == 'confirm'){
            this.showHideDialog(nextProps.show)
        }
    }

    showHideDialog(data) {
        let that = this;

       //多个弹性动画同时开始
       const createAnimation = function (value, toValue) {
            return Animated.spring(
                value,
                {
                    toValue: toValue,
                    easing: Easing.linear,
                    bounciness: 10,
                    useNativeDriver: true
                }
            )
        }

        const createAnimation1 = function (value, toValue) {
            return Animated.timing(
                value,
                {
                    toValue: toValue,
                    duration: 200,
                    // easing: Easing.linear,
                    // bounciness: 10,
                    useNativeDriver: true
                }
            )
        }

        if(data){
            this.state.currentAlpha = 1;
            this.state.currentSize = 1;
            this.setState({
                showHide: true
            },function(){
                Animated.parallel([
                    createAnimation(that.state.fadeAnim, that.state.currentAlpha),
                    createAnimation(that.state.size, that.state.currentSize)       
                    ]).start()
            })
        }else {
            this.state.currentAlpha = 0;
            this.state.currentSize = 0.3;
            Animated.parallel([
                createAnimation1(that.state.fadeAnim, that.state.currentAlpha),
                createAnimation1(that.state.size, that.state.currentSize)       
                ]).start(()=>{
                // 当弹窗opacity为0时将整个弹窗隐藏
                that.setState({showHide: false})
                if(that.state.currentAlpha == 0){
                    
                }
            })
        }
    }

    alertCallBack(){
        this.props.alertCallBack();
    }

    confirmCallBack(mess){
        if(mess == 0){
            this.props.confirmCallBack(0);
        }else {
            this.props.confirmCallBack(1);
        }
    }

    render() {
        return (
            <Alert 
                type={this.props.type}
                show={this.state.showHide}
                content={this.props.content}
                fadeAnim={this.state.fadeAnim}
                size={this.state.size}
                // alert的确定点击回调
                alertBtn={this.alertCallBack.bind(this)}
                confirmtBtn={this.confirmCallBack.bind(this)}
                leftBtn={this.props.leftBtn}
                rightBtn={this.props.rightBtn}
                centerBtn={this.props.centerBtn}
            />
        );
    }
}